<template>
  <button
    :class="{ active: curTab === item.name }"
    v-for="item in tabs"
    :key="item.name"
    @click="curTab = item.name"
  >
    {{ item.title }}
  </button>

  <hr />
  <KeepAlive :max="2">
    <component :is="curTab"></component>
  </KeepAlive>
</template>

<script>
import Home from "./components/Home.vue";
import About from "./components/About.vue";
import Concate from "./components/Concate.vue";

export default {
  name: "App",

  components: {
    Home,
    About,
    Concate,
  },

  data() {
    return {
      curTab: "Home",
      tabs: [
        { name: "Home", title: "首页" },
        { name: "About", title: "关于页" },
        { name: "Concate", title: "联系页" },
      ],
    };
  },
};
</script>

<style>
.active {
  color: red;
}
</style>
